<template>
	<view id="AssetDetails">

		<view class="conner">
			<view class="conner_top">
				<view class="top_text1">
					<view class="title">账户总额</view>
					<view class="title_text" v-show="flang==true">{{overAllBalance}}</view>
					<view class="title_text" v-show="flang==false">******</view>
					<view @click="changYanJing" :class="yanjing?'icon_img':'avtive_img'"></view>
				</view>
				<view class="conner_bottom">
					<view class="bottom_lift">
						<view class="lift_text1">昨日收益(元)</view>
						<view class="lift_text2" v-show="flang==true">
							<text v-if="todayEarnings">{{todayEarnings}}</text>
							<text v-else>0.00</text>
						</view>
						<view class="lift_text2" v-show="flang==false">******</view>
					</view>
					<view class="bottom_rigth">
						<view class="rigth_text1">累计收益(元)</view>
						<view class="rigth_text2" v-show="flang==true">
							<text v-if="totalEarnings">{{totalEarnings}}</text>
							<text v-else>0.00</text>
						</view>
						<view class="rigth_text2" v-show="flang==false">******</view>
					</view>
				</view>
			</view>
			<view class="boottom">
				<view class="boottom_item">
					<view class="item_lift">收益起始日期</view>
					<view class="item_rigth"></view>
				</view>
				<view class="boottom_item">
					<view class="item_lift">产品详情及规则</view>
					<view class="item_rigth">
						<image src="https://z3.ax1x.com/2021/04/08/cYtESU.png"></image>
					</view>

				</view>
			</view>


		</view>
		<!-- 定位按钮 -->
		<view class="DW_text">今日收益将于24点左右更新</view>
		<view class="dingwei" @click="openModal">转出</view>
		<view>

			<payKeyboard v-if="showKeyBoard" title="woniu安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
		</view>
		<view>

			<unik-modal ref="unikModal" :modalTitle="modalTitle" @confirmModal="confirmModal"
				@cancelModal="cancelModal">赎回成功，资金将在1-3个工作日自动转入余额
			</unik-modal>
		</view>
	</view>
</template>

<script>
	//倒入键盘插件
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	import unikModal from '@/components/unik-modal/unik-modal.vue'
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapState: mapStates,
		mapActions: mapActions4
	} = createNamespacedHelpers("current");
	const {
		mapState,
		mapActions
	} = createNamespacedHelpers('bankcard');
	const {
		mapState: userMapState,
		mapActions: mapActions3
	} = createNamespacedHelpers('UserInfor');
	const {
		mapActions: mapActions2
	} = createNamespacedHelpers('payCurrent');
	export default {
		components: {
			payKeyboard,
			unikModal
		},
		data() {
			return {
				modalTitle: '提示',
				showKeyBoard: false, //隐藏键盘
				yanjing: true, //控制眼睛
				flang: true, //控制星号与显示
				code: '', //基金code
				overAllBalance: '', //总金额
				todayEarnings: '', //昨日收益
				totalEarnings: '', //累计收益
				yuan: '', //转出金额
				//转出传参
				order: {
					productName: '', //基金名字
					fundNum: '', //转出金额（为负数）
					code: '', //基金代码
					id: '', //基金id
					name: '', //用户名
					payType: '余额', //提现至（默认转到余额）
					payPassword: '', //支付密码
				}
			}
		},
		onLoad(options) {
			console.log(options);
			this.overAllBalance = options.overAllBalance
			this.todayEarnings = options.todayEarnings
			this.totalEarnings = options.totalEarnings
			this.code = options.code
			this.order.name = this.userData.username
			this.getCurrentAssent({
				userName: this.userData.username
			})
		},
		computed: {
			...userMapState(['userData'])
		},
		methods: {
			...mapActions2(['payCurrent', 'getCurrentAssent']),
			// 改变眼睛状态
			changYanJing() {
				this.yanjing = !this.yanjing;
				this.flang = !this.flang;
			},
			//根据code获取基金详情
			...mapActions4(['getCurrentByCode']),
			async myGetCurrentById() {
				const data = await this.getCurrentByCode(this.code)
				this.order.productName = data.data.currentFundInfo.name
				this.order.code = this.code
				this.order.id = data.data.currentFundInfo.id
				this.order.fundNum = `-${this.overAllBalance}`
			},
			// 卖出按钮
			// 打开密码是输入框
			openModal() {
				this.myGetCurrentById()
				this.showKeyBoard = true
			},
			// 输入密码的回调
			async enterSuccess(password) {
				// console.log(password) // 输入的密码
				this.order.payPassword = password
				const data = await this.payCurrent(this.order)
				console.log('结果', data)
				if (data.code == 607) {
					uni.showToast({
						title: '密码错误，请重新输入',
						duration: 2000,
						icon: "none"
					})
					this.showKeyBoard = true; //键盘弹出
				} else if (data.code == 905) {
					uni.showToast({
						title: '赎回金额大于持有金额',
						duration: 2000,
						icon: "none"
					}, uni.navigateTo({
						//跳转持有页面
						url: "../personal/my-assets/CurrentAssets/CurrentAssets"
					}))
				} else if (data.code == 200) {
					
					this.getCurrentAssent({
						userName: this.userData.username
					})
					this.showKeyBoard = false
					this.show()
				}


			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false
			},
			//这是金额输入框
			show() {
				this.$refs.unikModal.show()
			},
			confirmModal() {
				uni.navigateBack({
					//跳转持有页面
					url: "../personal/my-assets/CurrentAssets/CurrentAssets",
					delta:1
				})
			},
			cancelModal() {
				
				uni.navigateTo({
					//跳转持有页面
					url: "../personal/my-assets/CurrentAssets/CurrentAssets"
				})
			}
		}
	}
</script>

<style lang="scss">
	.dingwei {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 85rpx;
		line-height: 85rpx;
		background-color: #3476F1;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}

	.DW_text {
		width: 100vw;
		text-align: center;
		padding: 6rpx 0;
		background-color: #DFE6F3;
		font-size: 24rpx;
		color: #4399FC;
		position: fixed;
		bottom: 85rpx;
	}

	.conner {
		height: 100vh;
		background-color: #f3f3f3;
		// padding-top: 160rpx;

		.conner_top {
			background-color: #fff;
			height: 325rpx;
			padding: 30rpx;
			border-radius: 0 0 30rpx 30rpx;

			.top_text1 {
				text-align: center;
				position: relative;

				.title {
					font-size: 26rpx;
					color: #999;
					margin-right: 60rpx;
				}

				.title_text {
					font-size: 52rpx;
					font-weight: 600;
					color: red;
					margin-top: 20rpx;
				}

				.icon_img {
					position: absolute;
					right: 246rpx;
					top: 3rpx;
					width: 60rpx;
					height: 30rpx;
					background-image: url("https://z3.ax1x.com/2021/04/12/cDT6tf.png");
					background-size: 60rpx;
					background-repeat: no-repeat;
					opacity: .6;
				}

				.avtive_img {
					position: absolute;
					right: 246rpx;
					top: 3rpx;
					width: 60rpx;
					height: 30rpx;
					background-image: url("https://z3.ax1x.com/2021/04/12/cD79N6.png");
					background-size: 45rpx;
					background-repeat: no-repeat;
					opacity: .6;
				}
			}

			.conner_bottom {
				display: flex;
				margin-top: 40rpx;
				padding: 0 40rpx;

				.bottom_lift {
					width: 50%;
					text-align: left;

					.lift_text1 {
						font-size: 26rpx;
						color: #999;
					}

					.lift_text2 {
						font-size: 40rpx;
						color: #333;
						margin-top: 10rpx;
					}
				}

				.bottom_rigth {
					width: 50%;
					text-align: right;

					.rigth_text1 {
						font-size: 26rpx;
						color: #999;
					}

					.rigth_text2 {
						font-size: 40rpx;
						color: #333;
						font-weight: 600;
						margin-top: 10rpx;

					}
				}
			}
		}

		.jieshao {
			padding: 20rpx 70rpx;
			margin: 20rpx 0;
			background-color: #fff;
			display: flex;

			.jieshao_lift {
				width: 50%;
				text-align: left;
				font-size: 26rpx;
				color: #333;
			}

			.jieshao_right {
				width: 50%;
				text-align: right;
				font-size: 26rpx;
				color: #999;
			}
		}

		.center {
			padding: 0rpx 70rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.center_item {
				padding: 30rpx 0;
				display: flex;

				&:nth-child(1) {
					border-bottom: 1px solid #f3f3f3;
				}

				.item_lift {
					width: 50%;
					text-align: left;

					.lift_text1 {
						font-size: 28rpx;
						color: #333;
					}

					.lift_text2 {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}

				.item_rigth {
					width: 50%;
					text-align: right;

					.rigth_text1 {
						font-size: 28rpx;
						color: red;
					}

					.rigth_text2 {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}


		.boottom {
			padding: 0rpx 70rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.boottom_item {
				padding: 30rpx 0;
				display: flex;

				&:nth-child(1) {
					border-bottom: 1px solid #f3f3f3;
				}

				.item_lift {
					width: 50%;
					text-align: left;
					font-size: 28rpx;
					color: #333;
				}

				.item_rigth {
					width: 50%;
					text-align: right;
					font-size: 28rpx;
					color: #999;
				}

				image {

					width: 20rpx;
					height: 26rpx;
					text-align: right;
				}
			}
		}
	}
</style>
